
import React from 'react';
import {
  StyleSheet,
  View,
  Text,
  TouchableOpacity,
} from 'react-native';
const Dimensions = require('Dimensions');
const {width} = Dimensions.get('window');
import CoursePeriods from './CoursePeriods';//购买后的课程目录
import CourseIntroduction from './CourseIntroduction';//课程简介
import TeaIntroduction from './TeaIntroduction';//老师介绍
import DetailPeriods from './DetailPeriods';//课时介绍
import QuestionArea from '../pages/My/QuestionArea';//问答区
import AllOrder from '../pages/My/comps/AllOrder';//全部订单
import HadBuy from '../pages/My/comps/HadBuy';//已支付订单
import NoBuy from '../pages/My/comps/NoBuy';//待支付订单
import {setSpText,setHW} from './ScreenUtil'
export default class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            tabName: this.props.tabList[0].tabName,//默认
        }
    }
    tabHandle(tabName) {
        this.setState({
            tabName: tabName,
        })
        if(tabName=='CoursePeriods'||tabName=='DetailPeriods'){//课程目录 true是允许展示
            this.props.showFootBuyFun&&this.props.showFootBuyFun(true)//如果有该方法 再调用
        }else{
            this.props.showFootBuyFun&&this.props.showFootBuyFun(false)
        }
        if(tabName=='QuestionArea'){//问答区
            this.props.showAskQuestionInput&&this.props.showAskQuestionInput(true);//让父组件的loading消失
        }else{
            this.props.showAskQuestionInput&&this.props.showAskQuestionInput(false);//让父组件的loading消失
        }
        // 告诉父组件当前的tanName
        this.props.tellParentTabName&& this.props.tellParentTabName(tabName)
        
    }
    //调用父组件的updateShowInput
    updateShowInput = (flag,comment_id) => {
        this.props.updateShowInput&&this.props.updateShowInput(flag,comment_id);
    }
    render() {
        return (
            <View>
                <View style={[styles.tabWrapper]}>
                    {  
                        this.props.tabList.map((item,index)=>{
                            return (
                                <View key={index} style={styles.tabContainerWrapper}>
                                    <TouchableOpacity 
                                        style={styles.tabNavItem} 
                                        onPress={()=>this.tabHandle(item.tabName)} >
                                        <Text style={[styles.tabText,this.state.tabName == item.tabName &&styles.textActive]}>
                                            {item.tabText}
                                        </Text>
                                        <View style={[styles.line,this.state.tabName == item.tabName && {
                                                width:setHW(48),
                                                height:setHW(6),
                                                borderRadius:setHW(3),
                                                backgroundColor:'#FF8A00',
                                                left:(width - setHW(120)) / this.props.tabList.length / 2 - setHW(24),
                                            }]}></View>
                                    </TouchableOpacity>
                                </View>
                            )
                        })
                    }
                </View>
                <View style={styles.tabContent}>
                    {/*课程目录 */}
                    {this.state.tabName == 'CoursePeriods' ? <CoursePeriods dataList={this.props.CoursePeriodsList} {...this.props}/> : null}
                    {/* 课程简介 */}
                    {this.state.tabName == 'CourseIntroduction' ? <CourseIntroduction 
                    dataList={this.props.CoursePeriodsList} 
                    courseId={this.props.courseId}
                    {...this.props} /> : null }
                    {/* 老师介绍 */}
                    {this.state.tabName == 'TeaIntroduction' ? <TeaIntroduction  otherCourse={true} {...this.props} /> : null }
                    {/* 课时介绍 */}
                    {this.state.tabName == 'DetailPeriods' ? <DetailPeriods  {...this.props} /> : null }
                    {/* 问答区 */}
                    {this.state.tabName == 'QuestionArea' ? <QuestionArea ref="childrens" 
                    updateShowInput={(flag,comment_id)=>this.updateShowInput(flag,comment_id)} 
                    {...this.props} /> : null }
                    {/* 全部订单 */}
                    {this.state.tabName == 'AllOrder' ? <AllOrder {...this.props} /> : null }
                    {/* 已支付订单 */}
                    {this.state.tabName == 'HadBuy' ? <HadBuy {...this.props} /> : null }
                    {/* 待支付订单 */}
                    {this.state.tabName == 'NoBuy' ? <NoBuy {...this.props} /> : null }
                </View>
            </View>
        );
    }
    onRef = () => {
        this.refs.childrens._selectCommentByCourse()//tab页面调用子组件的方法发
    }
}
const styles = StyleSheet.create({
    tabContent:{
        borderTopWidth:0.5,
        borderTopColor:'#ddd',
    },
    tabWrapper: {
        flexDirection: 'row',
        paddingLeft:setHW(60),
        paddingRight:setHW(60),
        backgroundColor:'#fff',
        height:setHW(88),
    },
    tabContainerWrapper: {
        flex:1,
        height:setHW(88),
    },
    tabNavItem: {
        height:setHW(88),
        flexDirection:'row',
        justifyContent: 'center',
        alignItems: 'center',
    },
    line:{
        position:'absolute',
        width:setHW(48),
        height:setHW(6),
        bottom:setHW(8),
    },
    tabText:{
        fontSize:setSpText(30),
        textAlign:'center',
        color:'#333',
    },
    textActive: {
        color: '#FF9920',
        fontSize:setSpText(30),
        fontWeight:'bold',
    },
})